<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">
		<!-- <view class="surplus-content">
			<view>账户余额(元)</view>
			<view>{{y}}</view>
			<view>总收益(元)</view>
			<view>{{sy}}</view>
			<view>奖池收益(元)</view>
			<view>{{jcsy}}</view>
			<view>我的积分</view>
			<view>{{j}}</view>
			<view @click="gotopage" data-url="/pages/personal/withdrawal">提现</view>
			<view @click="gotopage" data-url="/pages/personal/transfer">转账</view>
		</view> -->
		
		<view class="bg_box">
			<view class="bg01"></view>
			<view class="assets_box">
				<view class="text_box">
					<view class="title">我的报单币</view>
					<view class="num">{{y}}</view>
			<!-- 		<view class="text">累计收益：{{all_y}}</view> -->
				</view>
				<!-- <view class="menu" @tap="goScan">扫一扫</view> -->
				<!-- <view class="menu" data-url="/pages/personal/transfer_score" @click="gotopage">转积分</view> -->
			</view>
		</view>
		
		<view class="total_title">
			<view class="line"></view>
			<view class="text">收益明细</view>
		</view>
		
		<block v-for="(item, index) in list" :key="'list' + index">
		<view class="list_box">
			<view class="text_box">
				<view class="text">{{item.name}}</view>
				<view class="time">{{item.time}}</view>
			</view>
			<view class="money" v-if="item.st==1">{{item.money}}</view>
			<view class="money moneycolor" v-if="item.st==2">-{{item.money}}</view>
		</view>
		</block>
	
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			
			list:[
		
			],
				all_y:0,
			y:0,
		    sy:0,
			jcsy:0,
			sx:0,
			j:0,
		};
	},
	onShow(){
		let me = this;
		
		me.Net._get('balance',{},(res)=>{
			if(res.code ==1){
				me.list=res.data.llist
				me.all_y=res.data.all_j
				me.y=res.data.l
				me.sy=res.data.sy
				me.jcsy=res.data.jcsy
				me.sx=res.data.sx
				me.j=res.data.j
				console.log(res.data)
			}
		});
	},
	methods: {
		goScan(){
			
			// uni.navigateTo({
			// 	url: '/pages/personal/gotoscan?id='+1
			// });
			
			uni.scanCode({
				scanType: ['qrCode'],
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					let data = JSON.parse(res.result);
					uni.navigateTo({
						url:'/pages/personal/gotoscan?id='+res.result
					});
				}
			});
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		}
		
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
}

.surplus-content {
	width: 690rpx;
	height: 490rpx;
	margin: 2vw auto 0vw;
	background-image: linear-gradient(#4d726f, #b4eef7);
	background-position: bottom;
	border-radius: 2vw;
	background-repeat: no-repeat;
	position: relative;

	view {
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 40rpx;
		&:nth-child(1) {
			font-size: 28rpx;
			top: 50rpx;
		}
		&:nth-child(2) {
			font-size: 48rpx;
			top: 100rpx;
		}
		&:nth-child(3) {
			font-size: 28rpx;
			top: 50rpx;
			left: 430rpx;
		}
		&:nth-child(4) {
			font-size: 48rpx;
			top: 100rpx;
			left: 430rpx;
		}
		&:nth-child(5) {
			font-size: 28rpx;
			top: 230rpx;
		}
		&:nth-child(6) {
			font-size:48rpx;
			top: 280rpx;
		}
		&:nth-child(7) {
			font-size: 28rpx;
			top: 230rpx;
			left: 430rpx;
		}
		&:nth-child(8) {
			font-size: 48rpx;
			top: 280rpx;
			left: 430rpx;
		}
		&:nth-child(9) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 40rpx;
		   color: #036f7c;
		  }
		  &:nth-child(10) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 430rpx;
		   color: #036f7c;
		  }
	}
}

.bill-content {
	width: 690rpx;
	margin: 30rpx auto;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		padding: 24rpx 0;
	}

	.body {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 0 4rpx 2rpx #f6f6f6;

		.bill-item {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f6f7f9;
			&:last-child {
				border-bottom: none;
			}

			.left {
				view {
					font-weight: 500;
					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.right {
				font-size: 30rpx;
				font-weight: 500;
			}

			.red {
				color: #333;
			}
			.black {
				color: #ff4447;
			}
		}
	}
}

.list_box{
	width: 90%;
	margin: 0 auto;
	padding: 3vw 0;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #e8e8e8;
}

.list_box .text_box{
	flex: 1;
}

.list_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
}

.list_box .time{
	font-size: 3.2vw;
	color: #999;
	margin-top: 2vw;
}

.list_box .money{
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	text-align: right;
}

.moneycolor{
	color: #E1001E !important;
}

.total_title{
	width: 90%;
	margin: 6vw auto 0;
	display: flex;
	align-items: center;
}

.total_title .line{
	width: 2vw;
	height: 6vw;
	border-radius: 2vw;
	background-color: #4d726f;
	margin-right: 2vw;
}

.total_title .text{
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}

.bg_box{
	width: 100%;
	position: relative;
}

.bg_box .bg01{
	width: 100%;
	height: 30vw;
	background-color: #4d726f;
	
}

.bg_box .assets_box{
	width: 90%;
	position: absolute;
	top: 4vw;
	left: calc(50% - 45%);
	background-color: #f8f8f8;
	border: 1px solid #4d726f;
	border-radius: 3vw;
	padding: 4vw 5vw;
	display: flex;
	align-items: center;
}

.bg_box .assets_box .menu{
	width: 20vw;
	height: 9vw;
	line-height: 9vw;
	background-color: #ff1937;
	border-radius: 12vw;
	font-size: 3.5vw;
	color: #fff;
	text-align:center;
	margin-left: 2vw;
}

.bg_box .assets_box .text_box{
	flex: 1;
}

.bg_box .assets_box .text_box .title{
	font-size: 3.5vw;
	color: #333;
}

.bg_box .assets_box .text_box .num{
	font-size: 6vw;
	color: #333;
	font-weight: bold;
	margin-top: 3vw;
}

.bg_box .assets_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	margin-top: 3vw;
}
	
	
	
	
	
	
</style>